<template>
  <div class="scoredetailwrapper zanwei-top">
    <head-nav></head-nav>
    <div
      class="scoredetail">
      <div class="scoredetail-top">
        <!--        <img :src="userInfo.SJTP"/>-->

        <div class="pdinfo">
          <h3 style="text-align: center;">活动说明</h3>
        </div>
      </div>
      <div
        class="contentA scoredetail-bottom"
        v-html="cjhyData.CYHYQY"
      >
      </div>
    </div>

  </div>
</template>

<script>
  import api from "@/api/api";
  import {MessageBox, Toast, Popup} from "mint-ui";
  import {mapActions} from "vuex";

  export default {
    data() {
      return {
        type: "",
        userInfo: {},
        userId: '',
        cjhyData:{}
      };
    },
    created() {

    },
    mounted() {
      let id = this.$route.params.id;
      let that = this;
      api.getCjhyInfo(that, id, res => {
        console.log("查询超级会员卡结果", res);
        if (res.data.code == 0) {
          that.cjhyData = res.data.data;
          if (that.cjhyData.CJHYK.length > 0) {
            that.hykimg = that.host.filehost + that.cjhyData.CJHYK[0].ID;
          }
        }
      });

    },
    methods: {
      ...mapActions({
        commit_title: "commit_title"
      }),
      exchangeFn() {
        let id = this.$route.params.id;
        let userId = this.userId
        let page = this;

        MessageBox.confirm("本次需扣减" + this.userInfo.JF + "积分", "温馨提示").then(action => {
          if (action === "confirm") {
            //确定
            api.saveExchange(page, id, userId, cb);

            function cb(res) {
              let data = res.data
              if (data.code !== 0) {
                Toast({
                  message: data.msg,
                  duration: 2000
                });
              } else {

                data = JSON.parse(data.data)
                page.$router.push({
                  name: 'scoredetail2',
                  params: {
                    sjmc: data.SJMC,
                    ddbh: data.LSH,
                    kjjf: data.DHJF,
                    dhsj: data.DHSJ
                  }
                })
                let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
                if (userinfo == null || userinfo.vipcode === "") {
                  // 未登录
                  Toast({
                    message: "您还不是会员，快去注册吧！",
                    duration: 1200
                  });
                  setTimeout(function () {
                    that.$router.push({
                      path: "/register",
                      query: {
                        type: "scoredetail1"
                      }
                    });
                  }, 1500);
                  return;
                }

              }
            }

          }
        });


      },

    },

  };
</script>

<style lang="less">
  .scoredetailwrapper {
    ul {
      list-style: none;
    }
  }

  .scoredetail {
    padding: 0.2rem;

    .scoredetail-top {
      display: flex;
      padding-top: 0.2rem;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #cbcbcc;
        transform: scaleY(0.5);
        transform-origin: 0 100%;
      }

      img {
        width: 1.7rem;
        height: 1.5rem;
        border: #d4d4d4 solid 1px;
        margin: 0 0.2rem 0.2rem 0.1rem;
      }

      .pdinfo {
        flex: 1;
        margin-bottom: 0.2rem;

        h3 {
          font-size: 0.28rem;
        }

        span {
          font-size: 0.28rem;
          display: block;
          color: #F05DC4;
          margin-top: 0.1rem;
        }

        p {
          width: 100%;
          font-size: 0.24rem;
          margin-top: 0.06rem;
        }
      }
    }

    .scoredetail-center {
      padding-top: 0.3rem;
      padding-bottom: 0.4rem;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .miaoshu {
        width: 100%;
        margin-bottom: 0.2rem;

        .tips {
          text-align: center;
          padding: 1rem 2.4rem;
          word-break: break-word;
          border: 1px solid;
          position: relative;
          margin: .4rem 0;

          .whiteBlock_top {
            position: absolute;
            background-color: #fff;
            top: -1px;
            width: 5rem;
            height: 2px;
            left: 50%;
            transform: translateX(-50%);
          }

          .whiteBlack_bottom {
            position: absolute;
            background-color: #fff;
            bottom: -1px;
            width: 5rem;
            height: 2px;
            left: 50%;
            transform: translateX(-50%);
          }

          .whiteBlack_left {
            position: absolute;
            background-color: #fff;
            bottom: -1px;
            width: 2px;
            height: 1.4rem;
            left: -1px;
            top: 50%;
            transform: translateY(-50%);
          }

          .whiteBlack_right {
            position: absolute;
            background-color: #fff;
            bottom: -1px;
            width: 2px;
            height: 1.4rem;
            right: -1px;
            top: 50%;
            transform: translateY(-50%);
          }

        }
      }

      &::before {
        content: "";
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #cbcbcc;
        transform: scaleY(0.5);
        transform-origin: 0 100%;
      }

      /* p {
              font-size: 0.28rem;
              margin: 0.2rem;
            } */

      .btn {
        width: 4.76rem;
        height: 0.9rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.1rem;
        background: #F05DC4;
        color: #ffffff;
      }

      span {
        font-size: 0.24rem;
        color: #000000;
        margin-top: 0.1rem;
      }
    }

    .scoredetail-bottom {
      padding: 0.3rem 0.2rem;
    }
  }

  .zcbtn {
    font-size: 0.32rem;
    color: #F05DC4;
  }

  .sd_spec {
    width: 100%;
    padding-top: 0.3rem;

    .title {
      padding: 0 0.3rem;
      font-size: 0.36rem;
      line-height: 0.8rem;
      font-weight: bold;
      position: relative;
      align-items: center;
      display: flex;

      .name {
        max-width: 4.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        color: #ee0017;
        margin-left: 0.15rem;
      }

      .close {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        border: 0.01rem solid #dcdcdc;
        text-align: center;
        line-height: 0.6rem;
        position: absolute;
        top: -0.1rem;
        right: 0.3rem;
        color: #dcdcdc;

        i {
          font-size: 0.3rem;
        }
      }
    }

    .hasxz {
      padding: 0 0.3rem;
      height: 0.5rem;
      display: flex;
      align-items: center;

      .selBox {
        margin: 0 0.1rem;
      }
    }

    .types {
      padding: 0 0.3rem;
      padding-bottom: 0.15rem;

      .tit {
        line-height: 0.6rem;
        font-size: 0.28rem;
      }

      .ilist {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
          width: 1.56rem;
          height: 0.7rem;
          border: 0.01rem solid #e6e6e6;
          border-radius: 0.06rem;
          font-size: 0.26rem;
          margin-bottom: 0.1rem;
          text-align: center;
          line-height: 0.7rem;
        }

        li.selit {
          background-color: #f05dc4;
          color: #ffffff;
        }
      }
    }

    .numb {
      border-top: 0.01rem solid #e6e6e6;
      height: 1rem;
      padding: 0 0.27rem 0 0.42rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 0.34rem;
      }

      ul {
        display: flex;
        align-items: center;

        li {
          font-size: 0.36rem;
          width: 0.64rem;
          height: 0.64rem;
          line-height: 0.62rem;
          text-align: center;
        }

        .lef,
        .rig {
          font-size: 0.5rem;
          border-radius: 50%;
          background-color: #f0f0f0;
          color: #b3b3b3;
        }

        .mid {
          margin: 0 0.05rem;
          line-height: 0.64rem;
        }

        li.addsub {
          color: #f05dc4;
        }
      }
    }

    .qgbtn {
      width: 100%;
      height: 0.96rem;
      line-height: 0.96rem;
      text-align: center;
      font-size: 0.34rem;
      color: #ffffff;
      background-color: #f05dc4;
    }
  }
</style>
